<template>
	<view v-if="readOnly">{{valueDesc}}</view>
	<view v-else class="job-view" @click="toSelectPage()">
		<input class="job-input" v-model="displayValue" placeholder-class="placeholder-style"
			:placeholder="`请选择${field.label}`" />
		<uni-icons class="job-add-icon" type="more" color="#f0f0f0" size="24" />
	</view>
</template>

<script>
	export default {
		props: {
			value: [String, Number],
			default: null,
			field: Object,
			isEdit: Boolean,
			storeId: [String, Number],
		},

		data() {
			return {
				valueDesc: ''
			}
		},

		computed: {
			// 使用 computed 属性处理 value 的默认值
			displayValue() {
				if (this.field?.options && this.field?.options.length > 0) {
					for (let i = 0; i < this.field?.options.length; i++) {
						if (this.field?.options[i].value === this.value) {
							this.valueDesc = this.field?.options[i].text;
						}
					}
				}
				return this.valueDesc;
			},
		},

		methods: {
			toSelectPage() {
				uni.navigateTo({
					url: this.field.toSelectPage + this.value + "&storeId=" + this.storeId,
				})
			},
		}
	}
</script>

<style scoped>
	.job-input {
		padding-left: 10px;
		width: auto;
		position: relative;
		overflow: hidden;
		flex: 1;
		line-height: 1;
		font-size: 14px;
		height: 35px;
	}

	.job-view {
		display: flex;
		box-sizing: border-box;
		flex-direction: row;
		align-items: center;
		border: 1px solid #DCDFE6;
		border-radius: 4px;
	}

	.job-add-icon {
		padding: 0 5px;
	}
</style>

<style>
	.placeholder-style {
		color: #999999;
		/* 文字颜色 */
		font-size: 12px;
		/* 文字大小 */
		font-weight: normal;
		/* 字体粗细 */
	}
</style>